<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>智能表单</title>
</head>
<body>
    <!-- 
        form表单标签123
        1.action属性：提交数据至url的接口地址
        2.method属性：数据提交方式

        input输入框标签
        1.type属性
            1.1 text值：普通文本输入框
            1.2 password值：密码输入框
            1.3 submit值：提交数据的按钮
            1.4 reset值：重置数据的按钮
            1.5 button值：普通按钮
            
            1.6 radio值：单选按钮，若需要单选按钮互斥，则name属性必须一致
            1.7 checkbox值：复选框，若name一致，则可以将数据一起收集
            1.8 email值：邮箱的格式校验器
            1.9 file值：文件上传

            1.10 color值：颜色选择器
            1.11 search值：搜索框，后面点击X的符号，可以一键清除内容
            1.12 range值：滑动条  搭配属性：min最小值 max最大值 value默认值 step步长
            1.13 image值：充当提交按钮，但是可以使用图片作为按钮
            1.14 hidden值：隐藏
            1.15 url值：校验url的地址是否合法
            1.16 number值：确保只能填写数值型
            1.17 时间控件：date日期  time时间  datetime-local日期与时间  week星期  month月份
            
        2.name属性：form表单提交数据，必须指定name属性
        3.placeholder属性：小tips
        4.value属性：输入框的默认值
        5.checked属性：一般radio或者checkbox一起出现，代表有默认选项
        6.min最小值 max最大值 value默认值 step步长属性，搭配type="range"进行使用
        7.class属性、id属性：搭配CSS、JS操作获取标签元素时使用较多
        8.maxlength属性：限制输入框中输入的字数
        9.autofocus属性：自动获得焦点关注
        10.readonly属性：只读，但是任然有效
        11.disabled属性：失效，表单无法再为其收集数据
        12.hidden属性：隐藏
        13.autocomplete属性：默认是on，输入时会有提示数据 ； off，输入时不再会有下拉的提示信息
        14.required属性：输入框必填
        15.pattern属性：正则表达式匹配
        16.multiple属性：复数，可以搭配type="file"，多个文件上传

        select + option  下拉菜单标签
        1.multiple属性：复数
        2.selected属性：该option项被默认选中
        3.value属性：每项option的值

        textarea  文本域
        1.cols 列数
        2.rows 行数
     -->
     <fieldset>
         <legend>必填项</legend>
     </fieldset>
    <form action="#" method="GET">
        姓名：<input type="text" placeholder="请输入姓名" name="username" maxlength="10" autocomplete="off" /><br />
        密码：<input type="password" placeholder="请输入密码" name="password" required="required" pattern="^[0-9]*$" /><br />
        性别：
        <input type="radio" name="gender" value="boy" checked="checked" />男&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="gender" value="girl" />女
        <br/>
        爱好：
        <input type="checkbox" name="hobby" value="ball" />篮球&nbsp;&nbsp;
        <input type="checkbox" name="hobby" value="code" checked="checked" />编程&nbsp;&nbsp;
        <input type="checkbox" name="hobby" value="music" />音乐
        <br/>
        家庭地址：
        <select name="address" multiple="multiple">
            <option value="wx">江苏无锡</option>
            <option value="cz" selected="selected">江苏常州</option>
            <option value="nj">江苏南京</option>
        </select>
        <br/>
        颜色：
        <input type="color" name="color" /><br/>
        邮箱：
        <input type="email" name="email" /><br/>
        手机号：（大部分浏览器不支持使用）
        <input type="tel" name="telphone" /><br/>
        搜索框：
        <input type="search" name="query"/><br/>
        滑动条：
        <input type="range" min="0" max="10" value="2" step="2" name="range" /><br/>
        <input type="image" src="./img/login.png"/><br/>
        <input type="hidden" value="隐藏起来" /><br/>
        <input type="file" name="upload" multiple="multiple" /><br/>
        <input type="url" name="url" /><br/>
        <input type="number" name="num" /><br/>
        <br/>
        时间控件：
        <input type="date" />
        <input type="time" />
        <input type="datetime-local" />
        <input type="week" />
        <input type="month" />
        <br/>
        评价：
        <textarea name="content" cols="20" rows="10"></textarea>
        <br/>
        <input type="submit"/>&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset"/>
        &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="普通按钮" disabled="disabled" />
        <br/>
    </form>
</body>
</html>